<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box1">
        <h2 class="title"></h2>
        <ul>
        </ul>
    </div>

    <hr>

    <div class="box2">
        <h2 class="title"></h2>
        <img src=""/>
        <ul>
        </ul>
    </div>

    <script>
        let data1 = {
            title:'学生',
            list:['小明','小红','小刚']
        }

        let data2 = {
            title:'投稿',
            src:'./1.png',
            list:['游戏区','生活区','科技区']
        }
        // 现在我们模拟一个真实场景，创建一个类，new它的时候可以自动把数据渲染到页面上
        class Box{
            constructor(el,data){
                this.el = document.querySelector(el);
                this.title = data.title;
                this.list = data.list;
                this.render();//构造函数中调用render函数，实现new一个实例过后自动渲染到页面上
            }

            render(){
                this.el.querySelector('ul').innerHTML = this.list.map(item=>`<li>${item}</li>`).join('');
                this.el.querySelector('h2').innerHTML = this.title;
            }
        }

        new Box('.box1',data1)

        // 现在我们写一个继承Box的类，因为从上面的标签排布来看，.box2是有个图片的，显然Box类已经不能满足了，但是除了图片，其他部分和Box基本相同，所以我们学得继承就派上用场了
        class ImgBox extends Box{
            constructor(el,data){
                super(el,data);//注意super()会调用父类中的构造函数，而我们在父类的构造函数里写了个this.render(), 要注意通过super()调用的父类的构造函数，会让父类构造函数的this指向子类的实例, 父类的构造函数中调用的render并没有渲染图片，所以下面需要我们自己赋值src，自己再调一遍子类的render();
                this.imgsrc = data.src;
                this.render();
            }

            render(){
                super.render();
                this.el.querySelector('img').src = this.imgsrc;
            }
        }

        new ImgBox('.box2',data2)
    </script>
</body>
</html>